<template>
  <div>
    <div class="header">
      <h3>{{ areaName }}{{ typeName }}</h3>
    </div>
    <!-- 按字母查询 -->
    <div class="letter">
        <ul>
            <li v-for="(v,i) in letterList" :key="i" :class="{show:i<1}" @click="letterQuery($event)">{{v.letter}}</li>
        </ul>
    </div>
    <!-- 歌手列表 -->
    <ul class="content">
      <li v-for="(v,i) in singerList" :key="i">
        <div class="content_a" v-if="i<10"><router-link :to="`/SingerInfo/${v.id}`"><img :src="v.img1v1Url"></router-link></div>
        <div class="content_b"><router-link :to="`/SingerInfo/${v.id}`"><span>{{v.name}}</span></router-link></div>
        <div class="content_c" v-if="4<i&&i<6"></div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      area: "",
      type: "",
      initial:"-1",
      areaName: "",
      typeName: "",
      singerList:{},
      letterList:[
          {letter:"热门"},
          {letter:"A"},
          {letter:"B"},
          {letter:"C"},
          {letter:"D"},
          {letter:"E"},
          {letter:"F"},
          {letter:"G"},
          {letter:"H"},
          {letter:"I"},
          {letter:"J"},
          {letter:"K"},
          {letter:"L"},
          {letter:"M"},
          {letter:"N"},
          {letter:"O"},
          {letter:"P"},
          {letter:"Q"},
          {letter:"R"},
          {letter:"S"},
          {letter:"T"},
          {letter:"U"},
          {letter:"V"},
          {letter:"W"},
          {letter:"S"},
          {letter:"Y"},
          {letter:"Z"},
          {letter:"其他"},
      ]
    };
  },
  //
  methods: {
    //   获取歌手数据
    getSingerData() {
      axios
        .get(
          `http://127.0.0.1:3000/artist/list?type=${this.type}&area=${this.area}&initial=${this.initial}&limit=100`
        )
        .then((res) => {
            this.singerList = res.data.artists;
        });
    },
    letterQuery(e){
        switch (e.target.innerText) {
            case "热门":this.initial = "-1";break;
            case "其他":this.initial = "0";break;
            default:this.initial = e.target.innerText;break;
        }
       this.getSingerData();
        let qwe = document.querySelectorAll(".letter>ul>li")
        for(let i=0;i<qwe.length;i++){
            qwe[i].className= ""
        }
         e.target.className = "show"
        
    }
  },
  //
  created() {
    if (this.$route.params.area) {
      this.area = this.$route.params.area;
    } else {
      this.area = "";
    }
    if (this.$route.params.type) {
      this.type = this.$route.params.type;
    } else {
      this.type = "";
    }
    switch (this.area) {
      case "7":
        this.areaName = "华语";
        break;
      case "96":
        this.areaName = "欧美";
        break;
      case "8":
        this.areaName = "日本";
        break;
      case "16":
        this.areaName = "韩国";
        break;
      case "0":
        this.areaName = "其他";
        break;
      default:
        this.areaName = "热门";
        break;
    }
    switch (this.type) {
      case "1":
        this.typeName = "男歌手";
        break;
      case "2":
        this.typeName = "女歌手";
        break;
      case "3":
        this.typeName = "组合/乐团";
        break;
      default:
        this.typeName = "歌手";
        break;
    }
    this.getSingerData();
  },
};
</script>
<style scoped>
.header {
  border-bottom: 2px solid #c20c0c;
  padding-bottom: 10px;
}
.header h3 {
  font-size: 24px;
  font-weight: 400;
}
/* 字母 */
.letter{
    margin-top: 20px;
}
.letter>ul{
    display: flex;
    justify-content: space-around;
}
.letter>ul>li{
    padding: 3px 6px;
    font-size: 14px;
    cursor: pointer;
}
.show{
    background-color: #c20c0c;
    color: #fff;
}
.letter>ul>li:nth-last-child(1){
    font-size: 12px;
}
.letter>ul>li:first-of-type{
    font-size: 12px;
}
/* 歌手列表 */
.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}
.content>li{
    width: 130px;
    padding-bottom: 20px;
}
.content>li>.content_a>a>img{
width: 130px;
height: 130px;
}
.content>li>.content_b{
overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content>li>.content_b>a{
    font-size: 12px;
}
.content>li>.content_b>a:hover{
    text-decoration: underline;
}
.content>li>.content_c{
    width: 720px;
    height: 1px;
    background: #999999;
    margin-top: 30px;
}
</style>